<template>
<div class="header">
<el-header>
<el-row :gutter="20">
  <el-col :span="4">
  <div class="header-logo" @click="clickLogo">
    <h1><a href="javascript:void(0)" title="彩云拍">彩云拍</a></h1>
 </div>
  </el-col>
  <el-col :span="16" v-if="!isLoginPage">
  <el-menu :default-active="activeIndex"
           @select="handleSelect"
   class="el-menu-demo" mode="horizontal">
  <el-menu-item index="dashboard">主页</el-menu-item>
  <el-menu-item index="images">图库</el-menu-item>
  <el-menu-item index="info">个人资料</el-menu-item>
   <el-menu-item index="myMenu">我的菜单</el-menu-item>
    <el-menu-item index="bill">我的账单</el-menu-item>
  <!-- <el-submenu index="4">
  <template slot="title">我的</template>
  <el-menu-item index="2-1">我的菜单</el-menu-item>
  <el-menu-item index="2-2">我的账单</el-menu-item>
  </el-submenu> -->
</el-menu>
  </el-col>
  <el-col :span="4" v-if="isLoginPage"></el-col>
 </el-row>
</el-header>
</div>
</template>

<script>
export default {
  name: 'v-header',
  data(){
     return {
       activeIndex:'dashboard'
     }
  },
  computed: {
      isLoginPage () {
        console.log("isLoginPage=>",this.$store.getters.isLoginPage)
        return this.$store.getters.isLoginPage
      }
    },
    methods:{
     handleSelect(key, keyPath) {
        console.log(key, keyPath);
         this.$router.push(`/${keyPath}`)
      },
      clickLogo(){
       this.$router.push('/dashboard')
      }
    }
}
</script>

<style>
  .el-header {
    width:1024px;
    margin: 0 auto;
    height: 2.875rem !important;
    padding:0px !important;
    min-height: 2.875rem;
  }
  .el-row{
    margin-bottom: 0px !important;
    height: 2.875rem !important;
  }
  .el-col{
    height: 2.875rem !important;
  }
 .header{
    width:100%;
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(141,158,167,0.13);
 }

.header-logo{
    width: 195px;
    height: 2.875rem;
}
.header-logo h1{
    padding-top: 12px;
}
.header-logo a {
    width: 195px;
    height: 80%;
    background: url(../../assets/img/logo.jpg) no-repeat;
    display: block;
    text-indent: -999px;
    /*将文字隐藏掉 加上overflow hidden*/
    overflow: hidden;
    background-size:150px 25px;
}

.el-col .el-col-16{
     padding-left: 0px !important; 
     padding-right: 0px !important;
}
.el-menu.el-menu--horizontal{
    padding: 0px 30px;
    height: 100%;
}
.el-menu-item{
    height: 100% !important;
    line-height: 2.875rem !important;
    padding: 0px 30px;
    /* width: 20% !important; */
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: 2px solid #ff6161 !important;
}
</style>
